<template>
  <div class="about">
    <Child msg="helloword" msg2="你好vue3" @custom-event="hander"> 
      <template #aaa="scope">
        <div>
          {{scope.msg}}
          我是插槽
        </div>
      </template>
    </Child >
  </div>
  <input type="text" v-model="out" @input="outChange"/>
  {{out}}
</template>
<script lang="ts">
import Child from "./Child.vue"; 
import usedebounceRef from "../Hooks/DebounceRef"
import {nextTick, ref, watch} from "vue"
export default {
  components:{
    Child
  }, 
  setup(){
    // const out=ref("")
    let out=usedebounceRef('',0)
    const hander=(val:string)=>{
      alert(val)
    }
    // 这里不能用watch还没找到原因
    // watch(out,(new)=>{
    //   nextTick(()=>{console.log(new)})
    // })
    const outChange=()=>{
      setTimeout(()=>{
        console.log(out.value)
      },1)
      console.log(out,out.value)
    }
    return{
      hander,
      out,
      outChange
    }
  }
}
</script>
